์ด๋ฏธ์ง์ ์ปดํฌ๋ํธ์ ์ง์ฐ ๋ก๋ฉ์ ๋ํ ์ข ํฉ ๊ฐ์ด๋. ์น์ฌ์ดํธ ์ฑ๋ฅ๊ณผ ์ ์ธ๊ณ ์ฌ์ฉ์๋ฅผ ์ํ ์ฌ์ฉ์ ๊ฒฝํ์ ํฅ์์ํค์ธ์.
์ง์ฐ ๋ก๋ฉ: ์ด๋ฏธ์ง์ ์ปดํฌ๋ํธ๋ก ์น ์ฑ๋ฅ ์ต์ ํํ๊ธฐ
์ค๋๋ ์ ๋์งํธ ํ๊ฒฝ์์ ์น์ฌ์ดํธ ์ฑ๋ฅ์ ๋งค์ฐ ์ค์ํฉ๋๋ค. ์ฌ์ฉ์๋ค์ ๋น ๋ฅด๊ณ ๋ฐ์์ฑ์ด ์ข์ ๊ฒฝํ์ ๊ธฐ๋ํ๋ฉฐ, ๊ฒ์ ์์ง์ ์ด๋ฅผ ์ ๊ณตํ๋ ์น์ฌ์ดํธ๋ฅผ ์ฐ์ ์ ์ผ๋ก ํ๊ฐํฉ๋๋ค. ์ฑ๋ฅ์ ํฅ์์ํค๋ ์ค์ํ ๊ธฐ์ ์ค ํ๋๊ฐ ๋ฐ๋ก ์ง์ฐ ๋ก๋ฉ(lazy loading)์ ๋๋ค. ์ด ๊ธ์ ์ด๋ฏธ์ง์ ์ปดํฌ๋ํธ์ ์ง์ฐ ๋ก๋ฉ์ ๋ํ ์ข ํฉ์ ์ธ ๊ฐ์ด๋๋ฅผ ์ ๊ณตํ์ฌ, ์ ์ธ๊ณ ์ฌ์ฉ์๋ฅผ ์ํด ์น์ฌ์ดํธ๋ฅผ ์ต์ ํํ๋ ๋ฐ ๋์์ ์ค๋๋ค.
์ง์ฐ ๋ก๋ฉ(Lazy Loading)์ด๋ ๋ฌด์์ธ๊ฐ์?
์ง์ฐ ๋ก๋ฉ์ ๋ฆฌ์์ค(์ด๋ฏธ์ง, iframe, ์ปดํฌ๋ํธ ๋ฑ)๊ฐ ์ค์ ๋ก ํ์ํด์ง ๋๊น์ง, ์ฆ ๋ทฐํฌํธ์ ๋ค์ด์ค๊ธฐ ์ง์ ๊น์ง ๋ก๋ฉ์ ์ง์ฐ์ํค๋ ๊ธฐ์ ์ ๋๋ค. ์ด๋ ๋ชจ๋ ์์ฐ์ ํ ๋ฒ์ ๋ก๋ํ๋ ๋์ , ๋ธ๋ผ์ฐ์ ๊ฐ ์ด๊ธฐ ํ์ด์ง ๋ก๋ ์ ์ฌ์ฉ์์๊ฒ ๋ณด์ด๋ ๋ฆฌ์์ค๋ง ๋จผ์ ๋ก๋ํ๋ค๋ ๊ฒ์ ์๋ฏธํฉ๋๋ค. ์ฌ์ฉ์๊ฐ ํ์ด์ง๋ฅผ ์๋๋ก ์คํฌ๋กคํ๋ฉด, ๋ ๋ง์ ๋ฆฌ์์ค๊ฐ ๋ณด์ด๊ฒ ๋๋ฉด์ ๋ก๋๋ฉ๋๋ค.
์ด๋ ๊ฒ ์๊ฐํด ๋ณด์ธ์. ์ฌํ ์ง์ ๊พธ๋ฆฐ๋ค๊ณ ์์ํด ๋ณด์ธ์. ์ฒ์๋ถํฐ ์ท์ฅ ์ ์ฒด๋ฅผ ๋ค๊ณ ๊ฐ๋ ๋์ , ๋น์ฅ ํ์ํ ๊ฒ์ด๋ผ๊ณ ์๋ ์ท๋ง ์ฑ๊น๋๋ค. ์ฌํ์ ๊ณ์ํ๋ฉด์ ํ์์ ๋ฐ๋ผ ์ถ๊ฐ์ ์ธ ๋ฌผํ์ ๊บผ๋ด๊ฒ ๋์ฃ . ์ด๊ฒ์ด ๋ฐ๋ก ์น์ฌ์ดํธ์์ ์ง์ฐ ๋ก๋ฉ์ด ์๋ํ๋ ๋ฐฉ์์ ๋๋ค.
์ง์ฐ ๋ก๋ฉ์ ์ฌ์ฉํ๋ ์ด์ ๋ ๋ฌด์์ธ๊ฐ์?
์ง์ฐ ๋ก๋ฉ์ ์ฌ๋ฌ ๊ฐ์ง ์ค์ํ ์ด์ ์ ์ ๊ณตํฉ๋๋ค:
- ์ด๊ธฐ ํ์ด์ง ๋ก๋ ์๊ฐ ๊ฐ์ : ํ๋ฉด ๋ฐ์ ๋ฆฌ์์ค ๋ก๋ฉ์ ์ง์ฐ์ํด์ผ๋ก์จ, ๋ธ๋ผ์ฐ์ ๋ ์ฌ์ฉ์์๊ฒ ์ฆ์ ๋ณด์ด๋ ์ฝํ ์ธ ๋ก๋ฉ์ ์ง์คํ ์ ์์ต๋๋ค. ์ด๋ ๋ ๋น ๋ฅธ ์ด๊ธฐ ํ์ด์ง ๋ก๋ ์๊ฐ์ผ๋ก ์ด์ด์ ธ ์ฌ์ฉ์์ ์ฒซ์ธ์์ ๊ฐ์ ํ๊ณ ์ดํ๋ฅ ์ ์ค์ ๋๋ค.
- ๋์ญํญ ์๋น ๊ฐ์: ์ฌ์ฉ์๋ ์ค์ ๋ก ๋ณด๋ ๋ฆฌ์์ค๋ง ๋ค์ด๋ก๋ํ๊ฒ ๋๋ฏ๋ก, ํนํ ๋ชจ๋ฐ์ผ ๊ธฐ๊ธฐ๋ ๋ฐ์ดํฐ ์๊ธ์ ์ ์ ํ์ด ์๋ ์ฌ์ฉ์๋ค์ ๋์ญํญ ์๋น๋ฅผ ์ค์ฌ์ค๋๋ค. ์ด๋ ์ธํฐ๋ท ์๋๊ฐ ๋๋ฆฌ๊ฑฐ๋ ๋ฐ์ดํฐ ๋น์ฉ์ด ๋น์ผ ์ง์ญ์ ์ฌ์ฉ์์๊ฒ ํนํ ์ค์ํฉ๋๋ค.
- ์๋ฒ ๋ถํ ๊ฐ์: ์ด๊ธฐ ์์ฒญ์ ๋ ์ ๊ฒ ์ฒ๋ฆฌํจ์ผ๋ก์จ ์๋ฒ์ ๋ถํ๊ฐ ์ค์ด๋ค๊ณ , ์ด๋ ์ ๋ฐ์ ์ธ ์น์ฌ์ดํธ ์ฑ๋ฅ๊ณผ ํ์ฅ์ฑ์ ๊ฐ์ ํ ์ ์์ต๋๋ค.
- ๋ ๋์ ์ฌ์ฉ์ ๊ฒฝํ: ๋ ๋น ๋ฅธ ์น์ฌ์ดํธ๋ ๋ ๋์ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํ์ฌ ์ฐธ์ฌ๋, ์ ํ์จ ๋ฐ ๊ณ ๊ฐ ๋ง์กฑ๋๋ฅผ ๋์ ๋๋ค.
- SEO ๊ฐ์ : ๊ตฌ๊ธ๊ณผ ๊ฐ์ ๊ฒ์ ์์ง์ ํ์ด์ง ๋ก๋ ์๋๋ฅผ ์์ ๊ฒฐ์ ์์ธ์ผ๋ก ๊ณ ๋ คํฉ๋๋ค. ์ง์ฐ ๋ก๋ฉ์ ์น์ฌ์ดํธ์ SEO ์ฑ๋ฅ์ ํฅ์์ํค๋ ๋ฐ ๋์์ด ๋ ์ ์์ต๋๋ค.
์ด๋ฏธ์ง ์ง์ฐ ๋ก๋ฉ
์ด๋ฏธ์ง๋ ์ข ์ข ์น์ฌ์ดํธ์์ ๊ฐ์ฅ ํฐ ์์ฐ์ด๋ฏ๋ก ์ง์ฐ ๋ก๋ฉ์ ์ฃผ์ ๋์์ด ๋ฉ๋๋ค. ๋ค์์ ์ด๋ฏธ์ง๋ฅผ ์ํ ์ง์ฐ ๋ก๋ฉ ๊ตฌํ ๋ฐฉ๋ฒ์ ๋๋ค:
๋ค์ดํฐ๋ธ ์ง์ฐ ๋ก๋ฉ
์ต์ ๋ธ๋ผ์ฐ์ (Chrome, Firefox, Safari, Edge)๋ ์ด์ loading ์์ฑ์ ์ฌ์ฉํ ๋ค์ดํฐ๋ธ ์ง์ฐ ๋ก๋ฉ์ ์ง์ํฉ๋๋ค. ์ด๊ฒ์ด ์ด๋ฏธ์ง๋ฅผ ์ง์ฐ ๋ก๋ฉํ๋ ๊ฐ์ฅ ๊ฐ๋จํ๊ณ ํจ์จ์ ์ธ ๋ฐฉ๋ฒ์
๋๋ค.
๋ค์ดํฐ๋ธ ์ง์ฐ ๋ก๋ฉ์ ํ์ฑํํ๋ ค๋ฉด, ๊ฐ๋จํ loading="lazy" ์์ฑ์ <img> ํ๊ทธ์ ์ถ๊ฐํ๋ฉด ๋ฉ๋๋ค:
<img src="image.jpg" alt="My Image" loading="lazy">
loading ์์ฑ์ ์ธ ๊ฐ์ง ๊ฐ์ ๊ฐ์ง ์ ์์ต๋๋ค:
lazy: ์ด๋ฏธ์ง๊ฐ ๋ทฐํฌํธ์ ๋ค์ด์ค๊ธฐ ์ง์ ๊น์ง ๋ก๋ฉ์ ์ง์ฐ์ํต๋๋ค.eager: ํ์ด์ง์์์ ์์น์ ๊ด๊ณ์์ด ์ฆ์ ์ด๋ฏธ์ง๋ฅผ ๋ก๋ํฉ๋๋ค. (์ด ์์ฑ์ด ์๋ ๊ฒฝ์ฐ์ ๊ธฐ๋ณธ ๋์์ ๋๋ค.)auto: ๋ธ๋ผ์ฐ์ ๊ฐ ์ด๋ฏธ์ง์ ์ง์ฐ ๋ก๋ฉ ์ฌ๋ถ๋ฅผ ๊ฒฐ์ ํ๋๋ก ํฉ๋๋ค.
์์:
<img src="london_bridge.jpg" alt="London Bridge" loading="lazy" width="600" height="400">
<img src="tokyo_skyline.jpg" alt="Tokyo Skyline" loading="lazy" width="600" height="400">
<img src="rio_de_janeiro.jpg" alt="Rio de Janeiro" loading="lazy" width="600" height="400">
์ด ์์์์ ๋ฐ๋ ๋ธ๋ฆฌ์ง, ๋์ฟ ์ค์นด์ด๋ผ์ธ, ๋ฆฌ์ฐ๋ฐ์๋ค์ด๋ฃจ ์ด๋ฏธ์ง๋ ์ฌ์ฉ์๊ฐ ํด๋น ์์น๋ก ์คํฌ๋กคํ ๋๋ง ๋ก๋๋ฉ๋๋ค. ์ด๋ ์ฌ์ฉ์๊ฐ ํ์ด์ง ๋งจ ์๋๊น์ง ์คํฌ๋กคํ์ง ์์ ๊ฒฝ์ฐ ํนํ ์ ์ฉํฉ๋๋ค.
JavaScript๋ฅผ ์ด์ฉํ ์ง์ฐ ๋ก๋ฉ
๋ค์ดํฐ๋ธ ์ง์ฐ ๋ก๋ฉ์ ์ง์ํ์ง ์๋ ๊ตฌํ ๋ธ๋ผ์ฐ์ ์ ๊ฒฝ์ฐ, JavaScript ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ๊ฑฐ๋ ์ง์ ์คํฌ๋ฆฝํธ๋ฅผ ์์ฑํ ์ ์์ต๋๋ค. ๋ค์์ Intersection Observer API๋ฅผ ์ฌ์ฉํ ๊ธฐ๋ณธ ์์ ์ ๋๋ค:
const images = document.querySelectorAll('img[data-src]');
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
img.removeAttribute('data-src');
observer.unobserve(img);
}
});
});
images.forEach(img => {
observer.observe(img);
});
์ค๋ช :
data-src์์ฑ์ ๊ฐ์ง ๋ชจ๋<img>์์๋ฅผ ์ ํํฉ๋๋ค.- ์๋ก์ด
IntersectionObserver์ธ์คํด์ค๋ฅผ ์์ฑํฉ๋๋ค. ์ฝ๋ฐฑ ํจ์๋ ๊ด์ฐฐ๋ ์์๊ฐ ๋ทฐํฌํธ์ ๋ค์ด์ค๊ฑฐ๋ ๋๊ฐ ๋ ์คํ๋ฉ๋๋ค. - ์ฝ๋ฐฑ ํจ์ ๋ด์์
entries(๋ทฐํฌํธ์ ๊ต์ฐจ๋ ์์๋ค)๋ฅผ ์ํํฉ๋๋ค. - ์์๊ฐ ๊ต์ฐจ ์ค์ด๋ฉด(
entry.isIntersecting์ด true์ด๋ฉด), ์ด๋ฏธ์ง์src์์ฑ์data-src์์ฑ์ ๊ฐ์ผ๋ก ์ค์ ํฉ๋๋ค. - ๊ทธ ํ ๋ ์ด์ ํ์ํ์ง ์์ผ๋ฏ๋ก
data-src์์ฑ์ ์ ๊ฑฐํ๊ณ ์ด๋ฏธ์ง ๊ด์ฐฐ์ ์ค๋จํฉ๋๋ค. - ๋ง์ง๋ง์ผ๋ก,
observer.observe(img)๋ฅผ ์ฌ์ฉํ์ฌ ๊ฐ ์ด๋ฏธ์ง๋ฅผ ๊ด์ฐฐํฉ๋๋ค.
HTML ๊ตฌ์กฐ:
<img data-src="image.jpg" alt="My Image">
์ค์ ์ด๋ฏธ์ง URL์ด src ์์ฑ ๋์ data-src ์์ฑ์ ์์นํ๋ค๋ ์ ์ ์ ์ํ์ธ์. ์ด๋ ๋ธ๋ผ์ฐ์ ๊ฐ ์ด๋ฏธ์ง๋ฅผ ์ฆ์ ๋ก๋ํ๋ ๊ฒ์ ๋ฐฉ์งํฉ๋๋ค.
์ง์ฐ ๋ก๋ฉ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ฌ์ฉํ๊ธฐ
๋ช๋ช JavaScript ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ์ด๋ฏธ์ง ์ง์ฐ ๋ก๋ฉ ๊ณผ์ ์ ๋จ์ํํ ์ ์์ต๋๋ค. ์ธ๊ธฐ ์๋ ์ต์ ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- Lozad.js: ๊ฐ๋ณ๊ณ ์์กด์ฑ์ด ์๋ ์ง์ฐ ๋ก๋ฉ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋๋ค.
- yall.js: Yet Another Lazy Loader. Intersection Observer๋ฅผ ์ฌ์ฉํ๋ ์ต์ ์ง์ฐ ๋ก๋ฉ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋๋ค.
- React Lazy Load: ์ด๋ฏธ์ง ๋ฐ ๊ธฐํ ์ปดํฌ๋ํธ๋ฅผ ์ง์ฐ ๋ก๋ฉํ๊ธฐ ์ํ React ์ปดํฌ๋ํธ์ ๋๋ค.
์ด๋ฌํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ค์ ์ผ๋ฐ์ ์ผ๋ก ์ง์ฐ ๋ก๋ฉ์ ์ด๊ธฐํํ๊ธฐ ์ํ ๊ฐ๋จํ API๋ฅผ ์ ๊ณตํ๋ฉฐ, ํ๋ ์ด์คํ๋ ์ด๋ฏธ์ง๋ ์ ํ ํจ๊ณผ์ ๊ฐ์ ์ถ๊ฐ ๊ธฐ๋ฅ์ ์ ๊ณตํฉ๋๋ค.
์ปดํฌ๋ํธ ์ง์ฐ ๋ก๋ฉ
์ง์ฐ ๋ก๋ฉ์ ์ด๋ฏธ์ง์๋ง ๊ตญํ๋์ง ์์ต๋๋ค. React, Angular, Vue์ ๊ฐ์ ์ต์ JavaScript ํ๋ ์์ํฌ์์๋ ์ปดํฌ๋ํธ์๋ ์ ์ฉํ ์ ์์ต๋๋ค. ์ด๋ ๋ง์ ์ปดํฌ๋ํธ๋ฅผ ๊ฐ์ง ๋๊ท๋ชจ ๋จ์ผ ํ์ด์ง ์ ํ๋ฆฌ์ผ์ด์ (SPA)์ ํนํ ์ ์ฉํฉ๋๋ค.
React์์์ ์ง์ฐ ๋ก๋ฉ
React๋ ์ปดํฌ๋ํธ๋ฅผ ์ง์ฐ ๋ก๋ฉํ๊ธฐ ์ํ ๋ด์ฅ ํจ์์ธ React.lazy()๋ฅผ ์ ๊ณตํฉ๋๋ค. ์ด ํจ์๋ฅผ ์ฌ์ฉํ๋ฉด ์ปดํฌ๋ํธ๋ฅผ ๋์ ์ผ๋ก ๊ฐ์ ธ์ฌ ์ ์์ผ๋ฉฐ, ์ด ์ปดํฌ๋ํธ๋ค์ ๋ ๋๋ง๋ ๋๋ง ๋ก๋๋ฉ๋๋ค.
import React, { Suspense } from 'react';
const MyComponent = React.lazy(() => import('./MyComponent'));
function App() {
return (
<Suspense fallback={<div>Loading...</div>}>
<MyComponent />
</Suspense>
);
}
export default App;
์ค๋ช :
React.lazy()๋ฅผ ์ฌ์ฉํ์ฌMyComponent๋ฅผ ๋์ ์ผ๋ก ๊ฐ์ ธ์ต๋๋ค.import()ํจ์๋ ์ปดํฌ๋ํธ ๋ชจ๋๋ก ํด์๋๋ ํ๋ก๋ฏธ์ค๋ฅผ ๋ฐํํฉ๋๋ค.MyComponent๋ฅผ<Suspense>์ปดํฌ๋ํธ๋ก ๊ฐ์๋๋ค.Suspense์ปดํฌ๋ํธ๋ ์ปดํฌ๋ํธ๊ฐ ๋ก๋๋๋ ๋์ ํด๋ฐฑ UI(์ด ๊ฒฝ์ฐ "Loading...")๋ฅผ ํ์ํ ์ ์๊ฒ ํด์ค๋๋ค.
Angular์์์ ์ง์ฐ ๋ก๋ฉ
Angular๋ ๋ผ์ฐํ
์ค์ ์ loadChildren ์์ฑ์ ์ฌ์ฉํ์ฌ ๋ชจ๋์ ์ง์ฐ ๋ก๋ฉ์ ์ง์ํฉ๋๋ค.
const routes: Routes = [
{
path: 'my-module',
loadChildren: () => import('./my-module/my-module.module').then(m => m.MyModuleModule)
}
];
์ค๋ช :
my-module๊ฒฝ๋ก์ ๋ํ ๋ผ์ฐํธ๋ฅผ ์ ์ํฉ๋๋ค.loadChildren์์ฑ์ ์ฌ์ฉํ์ฌMyModuleModule์ด ์ง์ฐ ๋ก๋๋์ด์ผ ํจ์ ์ง์ ํฉ๋๋ค.import()ํจ์๊ฐ ๋ชจ๋์ ๋์ ์ผ๋ก ๊ฐ์ ธ์ต๋๋ค.then()๋ฉ์๋๋ ๋ชจ๋์ ์ ๊ทผํ์ฌMyModuleModuleํด๋์ค๋ฅผ ๋ฐํํ๋ ๋ฐ ์ฌ์ฉ๋ฉ๋๋ค.
Vue.js์์์ ์ง์ฐ ๋ก๋ฉ
Vue.js๋ ๋์ ๊ฐ์ ธ์ค๊ธฐ ๋ฐ component ํ๊ทธ๋ฅผ ์ฌ์ฉํ์ฌ ์ปดํฌ๋ํธ์ ์ง์ฐ ๋ก๋ฉ์ ์ง์ํฉ๋๋ค.
<template>
<component :is="dynamicComponent"></component>
</template>
<script>
export default {
data() {
return {
dynamicComponent: null
}
},
mounted() {
import('./MyComponent.vue')
.then(module => {
this.dynamicComponent = module.default
})
}
}
</script>
์ค๋ช :
:is์์ฑ๊ณผ ํจ๊ป<component>ํ๊ทธ๋ฅผ ์ฌ์ฉํ์ฌ ์ปดํฌ๋ํธ๋ฅผ ๋์ ์ผ๋ก ๋ ๋๋งํฉ๋๋ค.mounted์๋ช ์ฃผ๊ธฐ ํ ์์import()ํจ์๋ฅผ ์ฌ์ฉํ์ฌMyComponent.vue๋ฅผ ๋์ ์ผ๋ก ๊ฐ์ ธ์ต๋๋ค.- ๊ทธ๋ฐ ๋ค์
dynamicComponent๋ฐ์ดํฐ ์์ฑ์ ๋ชจ๋์ ๊ธฐ๋ณธ ๋ด๋ณด๋ด๊ธฐ(default export)๋ก ์ค์ ํฉ๋๋ค.
์ง์ฐ ๋ก๋ฉ์ ์ํ ๋ชจ๋ฒ ์ฌ๋ก
์ง์ฐ ๋ก๋ฉ์ด ํจ๊ณผ์ ์ผ๋ก ๊ตฌํ๋๋๋ก ํ๋ ค๋ฉด ๋ค์ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ๊ณ ๋ คํ์ธ์:
- ๊ฐ๋ฅํ๋ฉด ๋ค์ดํฐ๋ธ ์ง์ฐ ๋ก๋ฉ ์ฌ์ฉ: ์ต์ ๋ธ๋ผ์ฐ์ ๋ฅผ ๋์์ผ๋ก ํ๋ ๊ฒฝ์ฐ, ์ด๋ฏธ์ง์ iframe์ ๋ค์ดํฐ๋ธ
loading์์ฑ์ ์ฌ์ฉํ์ธ์. - ์ฌ๋ฐ๋ฅธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ ํ: ๊ตฌํ ๋ธ๋ผ์ฐ์ ๋ฅผ ์ง์ํด์ผ ํ๊ฑฐ๋ ์ถ๊ฐ ๊ธฐ๋ฅ์ด ํ์ํ ๊ฒฝ์ฐ, ์ ์ ์ง ๊ด๋ฆฌ๋๊ณ ๊ฐ๋ฒผ์ด ์ง์ฐ ๋ก๋ฉ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ ํํ์ธ์.
- ํ๋ ์ด์คํ๋ ์ฌ์ฉ: ๋ฆฌ์์ค๊ฐ ๋ก๋๋ ๋ ์ฝํ ์ธ ๊ฐ ์ด๋ํ๋ ๊ฒ์ ๋ฐฉ์งํ๊ธฐ ์ํด ํ๋ ์ด์คํ๋ ์ด๋ฏธ์ง๋ UI ์์๋ฅผ ์ ๊ณตํ์ธ์. ์ด๋ ์ฌ์ฉ์ ๊ฒฝํ์ ๊ฐ์ ํ๊ณ ๋ ์ด์์ ๋ถ์์ ์ฑ์ ์ค์ ๋๋ค. ๋งค์ฐ ์์(๋ฎ์ KB ํฌ๊ธฐ) ํ๋ ์ด์คํ๋ ์ด๋ฏธ์ง๋ฅผ ์ฌ์ฉํ๊ฑฐ๋, ์ต์ข ์ ์ผ๋ก ๋ก๋๋ ์ด๋ฏธ์ง์ ํ๊ท ์์๊ณผ ์ผ์นํ๋ ๋จ์ ๋ธ๋ก์ ์ฌ์ฉํ์ธ์.
- ์ด๋ฏธ์ง ์ต์ ํ: ์ง์ฐ ๋ก๋ฉ์ ๊ตฌํํ๊ธฐ ์ ์ ์ด๋ฏธ์ง๋ฅผ ์์ถํ๊ณ ์ ์ ํ ํ์ผ ํ์(์: WebP, JPEG, PNG)์ ์ฌ์ฉํ์ฌ ์ต์ ํํ์ธ์.
- ์ฒ ์ ํ ํ ์คํธ: ๋ค์ํ ๋ธ๋ผ์ฐ์ , ๊ธฐ๊ธฐ ๋ฐ ๋คํธ์ํฌ ์กฐ๊ฑด์์ ์ง์ฐ ๋ก๋ฉ ๊ตฌํ์ด ์ฌ๋ฐ๋ฅด๊ฒ ์๋ํ๋์ง ํ ์คํธํ์ธ์. ์ด๋ฏธ์ง๊ฐ ๋ก๋๋๋ ๋ฐ ๋๋ฌด ์ค๋ ๊ฑธ๋ฆฌ์ง ์๋๋ก ์ ์ฌ์ ๊ธฐ๊ธฐ(์ฃผ๋ก ๊ตฌํ ํด๋ํฐ) ์ฌ์ฉ์์๊ฒ ํนํ ์ฃผ์๋ฅผ ๊ธฐ์ธ์ด์ธ์.
- ์คํฌ๋กค ์์ด ๋ณผ ์ ์๋ ๋ถ๋ถ(Above the fold) ๊ณ ๋ ค: ์ด๊ธฐ ํ์ด์ง ๋ก๋ ์ ๋ณด์ด๋ ์์์ ๋ํด์๋ ์ง์ฐ ๋ก๋ฉ์ ํผํ์ธ์. ์ด๋ฌํ ์์๋ค์ ๋น ๋ฅธ ์ด๊ธฐ ๋ ๋๋ง์ ์ํด ์ฆ์ ๋ก๋๋์ด์ผ ํฉ๋๋ค.
- ์ค์ ๋ฆฌ์์ค ์ฐ์ ์์ ์ง์ : ์ด๊ธฐ ์ฌ์ฉ์ ๊ฒฝํ์ ํ์์ ์ธ ์ค์ ๋ฆฌ์์ค๋ฅผ ์๋ณํ๊ณ ์ฆ์ ๋ก๋ํ์ธ์. ์ฌ๊ธฐ์๋ ์น์ฌ์ดํธ ๋ก๊ณ , ๋ด๋น๊ฒ์ด์ ์์ ๋ฐ ํ์ด์ง์ ์ฃผ์ ์ฝํ ์ธ ๊ฐ ํฌํจ๋ ์ ์์ต๋๋ค.
- ์ฑ๋ฅ ๋ชจ๋ํฐ๋ง: ์ฑ๋ฅ ๋ชจ๋ํฐ๋ง ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ ์ง์ฐ ๋ก๋ฉ์ด ์น์ฌ์ดํธ ์ฑ๋ฅ์ ๋ฏธ์น๋ ์ํฅ์ ์ถ์ ํ์ธ์. ์ด๋ฅผ ํตํด ๋ฌธ์ ๋ฅผ ์๋ณํ๊ณ ๊ตฌํ์ ์ต์ ํํ๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค. Google์ PageSpeed Insights์ WebPageTest๋ ์ฌ์ดํธ ์ฑ๋ฅ์ ์ธก์ ํ๊ธฐ ์ํ ํ๋ฅญํ ๋ฌด๋ฃ ๋๊ตฌ์ ๋๋ค.
๊ตญ์ ํ ๊ณ ๋ ค ์ฌํญ
์ ์ธ๊ณ ์ฌ์ฉ์๋ฅผ ๋์์ผ๋ก ์ง์ฐ ๋ก๋ฉ์ ๊ตฌํํ ๋ ๋ค์ ๊ตญ์ ํ ์์๋ฅผ ๊ณ ๋ คํ์ธ์:
- ๋ค์ํ ๋คํธ์ํฌ ์๋: ์ง์ญ๋ง๋ค ์ฌ์ฉ์๋ค์ ๋คํธ์ํฌ ์๋๊ฐ ํฌ๊ฒ ๋ค๋ฅผ ์ ์์ต๋๋ค. ๋๋ฆฐ ์ฐ๊ฒฐ์ ๊ณ ๋ คํ์ฌ ์ง์ฐ ๋ก๋ฉ ์ ๋ต์ ์ต์ ํํ์ธ์.
- ๋ฐ์ดํฐ ๋น์ฉ: ์ผ๋ถ ์ง์ญ์์๋ ๋ฐ์ดํฐ ๋น์ฉ์ด ๋น์๋๋ค. ์ง์ฐ ๋ก๋ฉ์ ๋ฐ์ดํฐ ์๋น๋ฅผ ์ค์ด๊ณ ์ ํ๋ ๋ฐ์ดํฐ ์๊ธ์ ๋ฅผ ์ฌ์ฉํ๋ ์ฌ์ฉ์๋ค์ ๊ฒฝํ์ ๊ฐ์ ํ๋ ๋ฐ ๋์์ด ๋ ์ ์์ต๋๋ค.
- ๊ธฐ๊ธฐ ์ฑ๋ฅ: ๋ค๋ฅธ ์ง์ญ์ ์ฌ์ฉ์๋ค์ ๋ค์ํ ์ฑ๋ฅ์ ๊ธฐ๊ธฐ๋ฅผ ์ฌ์ฉํ ์ ์์ต๋๋ค. ๋ค์ํ ๊ธฐ๊ธฐ์์ ์ง์ฐ ๋ก๋ฉ ๊ตฌํ์ ํ ์คํธํ์ฌ ์ฌ๋ฐ๋ฅด๊ฒ ์๋ํ๋์ง ํ์ธํ์ธ์.
- ์ฝํ ์ธ ์ ์ก ๋คํธ์ํฌ(CDN): CDN์ ์ฌ์ฉํ์ฌ ์ ์ธ๊ณ์ ์์นํ ์๋ฒ์์ ์น์ฌ์ดํธ์ ์์ฐ์ ์ ์กํ์ธ์. ์ด๋ ๋ค๋ฅธ ์ง์ญ์ ์ฌ์ฉ์๋ค์ ์ฑ๋ฅ์ ํฅ์์ํฌ ์ ์์ต๋๋ค. ์๋ฅผ ๋ค์ด, ์ ๋ฝ์ ๋๋๋งํฌ ์ด๋ฏธ์ง๋ ๊ฐ๋ฅํ๋ฉด ์ ๋ฝ ์ฌ์ฉ์๋ฅผ ์ํด ์ ๋ฝ์ CDN ์๋ํฌ์ธํธ์์ ์ ๊ณต๋์ด์ผ ํฉ๋๋ค.
- ์ด๋ฏธ์ง ํ์: WebP์ ๊ฐ์ด ๊ธฐ์กด ํ์(JPEG, PNG)๋ณด๋ค ๋ ๋์ ์์ถ๋ฅ ๊ณผ ํ์ง์ ์ ๊ณตํ๋ ์ต์ ์ด๋ฏธ์ง ํ์์ ์ฌ์ฉํ๋ ๊ฒ์ ๊ณ ๋ คํ์ธ์. ๊ทธ๋ฌ๋ ๋ธ๋ผ์ฐ์ ํธํ์ฑ์ ์ ์ํ๊ณ , WebP๋ฅผ ์ง์ํ์ง ์๋ ๊ตฌํ ๋ธ๋ผ์ฐ์ ๋ฅผ ์ํด ์ ์ ํ ๋์ฒด ์๋จ์ ์ฌ์ฉํ์ธ์.
- ์ ๊ทผ์ฑ: ์ง์ฐ ๋ก๋ฉ ๊ตฌํ์ด ์ฅ์ ๊ฐ ์๋ ์ฌ์ฉ์์๊ฒ๋ ์ ๊ทผ ๊ฐ๋ฅํ๋๋ก ํ์ธ์. ์ด๋ฏธ์ง์ ์ ์ ํ ๋์ฒด ํ ์คํธ๋ฅผ ์ ๊ณตํ๊ณ , ๋ก๋ฉ ์ํ๊ฐ ๋ณด์กฐ ๊ธฐ์ ์ ์ ๋ฌ๋๋๋ก ํ์ธ์.
๊ฒฐ๋ก
์ง์ฐ ๋ก๋ฉ์ ์น์ฌ์ดํธ ์ฑ๋ฅ์ ์ต์ ํํ๊ณ ์ฌ์ฉ์ ๊ฒฝํ์ ํฅ์์ํค๋ ๊ฐ๋ ฅํ ๊ธฐ์ ์ ๋๋ค. ํ๋ฉด ๋ฐ์ ๋ฆฌ์์ค ๋ก๋ฉ์ ์ง์ฐ์ํด์ผ๋ก์จ ์ด๊ธฐ ํ์ด์ง ๋ก๋ ์๊ฐ์ ์ค์ด๊ณ , ๋์ญํญ ์๋น๋ฅผ ๊ฐ์์ํค๋ฉฐ, ์๋ฒ ๋ถํ๋ฅผ ๋ฎ์ถ ์ ์์ต๋๋ค. ์์ ๊ฐ์ธ ์น์ฌ์ดํธ๋ฅผ ๊ตฌ์ถํ๋ ๋๊ท๋ชจ ์ํฐํ๋ผ์ด์ฆ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ๋ , ์ง์ฐ ๋ก๋ฉ์ ์ฑ๋ฅ ์ต์ ํ ์ ๋ต์ ํต์ฌ ๋ถ๋ถ์ด ๋์ด์ผ ํฉ๋๋ค. ์ด ๊ธ์์ ์ค๋ช ํ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ๋ฐ๋ฅด๊ณ ๊ตญ์ ํ ์์๋ฅผ ๊ณ ๋ คํจ์ผ๋ก์จ, ์ง์ฐ ๋ก๋ฉ ๊ตฌํ์ด ํจ๊ณผ์ ์ด๊ณ ์ ์ธ๊ณ ์ฌ์ฉ์์๊ฒ ๊ธ์ ์ ์ธ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํ๋๋ก ํ ์ ์์ต๋๋ค.
์ง์ฐ ๋ก๋ฉ์ ๋์ ํ์ฌ ๋ชจ๋๋ฅผ ์ํ ๋ ๋น ๋ฅด๊ณ , ๋ ํจ์จ์ ์ด๋ฉฐ, ๋ ์ฌ์ฉ์ ์นํ์ ์ธ ์น ๊ฒฝํ์ ๋ง๋ค์ด ๋ณด์ธ์.